<template>
    <div class="head">
        <div class="logo">
            <img src="../../assets/logo.png" alt="">
        </div>
        <div class="system">
           <span v-show="isfrontend">前台管理</span>
           <span v-show="!isfrontend">后台管理</span>
        </div>
        <h1>餐厅管理系统</h1>
        <div class="loginMessage">
            <div class="userMessage">
                <div class="userName">{{userName}}欢迎登陆!!!</div>
                <div class="loginTime">{{time}}</div>
            </div>
            <el-button class="logout" size="mini" type="warning" @click="out">退出登录</el-button>
        </div>
    </div>
</template>

<script>

    export default {
        data(){
            return{
                time:'',
                isfrontend:true,
                userName:'组长'
            }
        },
        computed:{
        },
        created(){
           this.currentTime();
        },
        methods:{
            getTime(){
                var that = this;
                let yy = new Date().getFullYear();
                let mm = new Date().getMonth()+1;
                let dd = new Date().getDate();
                let hh = new Date().getHours();
                let mf = new Date().getMinutes()<10 ? '0'+new Date().getMinutes() : new Date().getMinutes();
                let ss = new Date().getSeconds()<10 ? '0'+new Date().getSeconds() : new Date().getSeconds();
                that.time = yy+'-'+mm+'-'+dd+' '+hh+':'+mf+':'+ss;
            },
            currentTime(){
                setInterval(this.getTime,500)
            },
            out(){
                this.$router.push('/login')
            }
        }
    }
</script>
// #0066CC
<style scoped lang = 'less'>
    .head{
        overflow: hidden;
        height: 60px;
        .logo{
            margin-left: 10px;
            margin-top: 10px;
            width: 160px;
            height:40px;
            float: left;
            img{
                width: 160px;
                height:40px;
            }
        }
        .system{
            width: 100px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            font-weight: bold;
            float: left;
            margin-top: 36px;
            span{
                /*display: inline-block;*/
                font-size: 14px;
                color: #fff;
                width: 100px;
                height: 18px;
                line-height: 18px;
                text-align: center;
                /*letter-spacing: 3px;*/
            }
        }
        h1{
            display: inline-block;
            float: left;
            margin-left:313px;
            margin-top: 0;
            color: #fff;
            letter-spacing: 3px;
            width: 200px;
            height: 60px;
            line-height: 60px;
            text-align: center;
        }
        .loginMessage{
            float: right;
            width: 250px;
            height:60px;
            color: #fff;
            .userMessage{
                width:150px;
                height: 50px;
                margin-top: 5px;
                float: left;
                .userName,.loginTime{
                    font-size: 14px;
                    height: 25px;
                    width: 150px;
                    line-height: 25px;
                    text-align: center;
                }
            }
            .logout{
                margin-top: 16px;
                margin-left: 10px;
            }
        }
    }
</style>